import React from "react";
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker,Radio } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
import { HomeOutlined,KeyOutlined,CloseCircleOutlined,DownSquareOutlined,CloseSquareOutlined,UserOutlined,MailOutlined,NumberOutlined,UserAddOutlined,} from '@ant-design/icons';
import {regist} from "../API/axios/user";


const { Option } = Select;

export default function Zform(props){

    const [form] = Form.useForm();
    const colleges = ['管理学院','经济学院','计算机学院','理学院'];

    const myfilter = function (obj) {
        const result = {};
        Object.keys(obj).filter((key)=>{
            return key !== 'cpassword';
        }).forEach((key)=>{
            result[key] = obj[key];
        });
        return result;
    };

    const userRegist = async ()=>{
        await form.validateFields().then(async values=>{
            await regist(myfilter(values)).then( res => {
                alert(JSON.stringify(res.data));
                /*if (res.data.msg === ''){
                    setVisible1(false);
                    setVisible2(true);
                }*/
            }).catch( error =>{
                alert(JSON.stringify(error));
            });
        });

    };

    return(
        <Drawer
            title="注册您的账户"
            width={600}
            visible={props.formvisible}
            closeIcon={<CloseCircleOutlined/>}
            onClose={props.hideregist}
            footer={
                <div
                    style={{
                        textAlign: 'center',
                    }}
                >
                    <Button onClick={props.hideregist} style={{ marginRight: 20 }} icon={<CloseSquareOutlined />}>
                        取消
                    </Button>
                    <Button onClick={userRegist} type="primary" icon={<DownSquareOutlined />}>
                        提交
                    </Button>
                </div>
            }
        >
            <Form form={form} layout="vertical" hideRequiredMark>
                <Row gutter={20}>
                    <Col span={12}>
                        <Form.Item
                            name="name"
                            label="真实姓名"
                            rules={[{ required: true, message: '请输入您的姓名' }]}
                        >
                            <Input placeholder="请输入姓名" prefix={<UserOutlined />}/>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            name="email"
                            label="邮箱"
                            rules={[{ required: true, message: '请输入您的邮箱' },
                                {pattern: /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                                    message: '请输入正确邮箱格式'}]}
                        >
                            <Input
                                style={{ width: '100%' }}
                                placeholder="请输入邮箱"
                                prefix={<MailOutlined />}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={20}>
                    <Col span={12}>
                        <Form.Item
                            name="tel"
                            label="手机号"
                            rules={[{ required: true, message: '请输入您的手机号' },
                                {pattern: /^1[345789]\d{9}$/g, message: '请输入正确格式手机号'}]}
                        >
                            <Input placeholder="请输入手机号" prefix={<NumberOutlined />}/>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            name="username"
                            label="用户名"
                            rules={[{ required: true, message: '请输入您的用户名' },
                                {pattern: /^[\u4e00-\u9fa50-9a-zA-Z_]{1,11}$/,
                                    message: '请设置正确格式用户名'}]}
                        >
                            <Input
                                style={{ width: '100%' }}
                                placeholder="请设置用户名"
                                prefix={<UserAddOutlined />}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={20}>
                    <Col span={12}>
                        <Form.Item
                            name="password"
                            label="密码"
                            rules={[{ required: true, message: '请输入您的密码' },
                                {pattern: /^[0-9a-zA-Z_]{6,11}$/,
                                    message: '请设置6到11位密码'}]}
                        >
                            <Input
                                type={"password"}
                                style={{ width: '100%' }}
                                placeholder="请输入密码"
                                prefix={<KeyOutlined/>}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            name="cpassword"
                            label="再次输入密码"
                            rules={[{ required: true, message: '请输入您的密码' },
                                {validator: (rule,value,callback)=>{
                                        if(value !== form.getFieldValue('password')){
                                            callback('两次密码输入不一致！')
                                        } else {
                                            //必须要跳出否则无法使用表单的validateFields
                                            callback();
                                        }
                                    }}]}
                        >
                            <Input
                                style={{ width: '100%' }}
                                placeholder="请输入密码"
                                prefix={<KeyOutlined/>}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={8}>
                        <Form.Item
                            name="college"
                            label="学院"
                            rules={[{ required: true, message: '请选择学院' }]}
                        >
                            <Select placeholder="请选择学院" suffixIcon={<HomeOutlined />}>
                                {colleges.map((college)=> <Option value={college}>{college}</Option>)}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="birth"
                            label="出生年月"
                            rules={[{ required: true, message: '请输入出生年月' }]}
                        >
                            <DatePicker
                                locale={locale}
                                picker="month"
                                style={{ width: '100%' }}
                                getPopupContainer={trigger => trigger.parentElement}
                                placeholeder="请输入出生年月"
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="sex"
                            label="性别"
                            rules={[{ required: true, message: '请选择入学时间' }]}
                        >
                            <Radio.Group>
                                <Radio value={'male'}>男</Radio>
                                <Radio value={'female'}>女</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={20}>
                    <Col span={24}>
                        <Form.Item
                            name="description"
                            label={"个人描述"}
                            rules={[
                                {
                                    required: true,
                                    message: '请简要描述',
                                },
                            ]}
                        >
                            <Input.TextArea rows={4} placeholder="请简要说明来到这里的目的以及想要在这里获得什么" />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Drawer>
    )
}
